<template>
  <el-card shadow="hover" class="card_wrapper" :body-style="cardStyle as any" @click="goHospitalInfoHandler">
    <div class="left_card_wrapper">
      <div class="card_title">{{ props.data.hosname }}</div>
      <div class="card_content">
        <div class="card_content_left">
          <svg
            viewBox="64 64 896 896"
            focusable="false"
            data-icon="like"
            width="1em"
            height="1em"
            fill="currentColor"
            aria-hidden="true"
          >
            <path
              d="M885.9 533.7c16.8-22.2 26.1-49.4 26.1-77.7 0-44.9-25.1-87.4-65.5-111.1a67.67 67.67 0 00-34.3-9.3H572.4l6-122.9c1.4-29.7-9.1-57.9-29.5-79.4A106.62 106.62 0 00471 99.9c-52 0-98 35-111.8 85.1l-85.9 311H144c-17.7 0-32 14.3-32 32v364c0 17.7 14.3 32 32 32h601.3c9.2 0 18.2-1.8 26.5-5.4 47.6-20.3 78.3-66.8 78.3-118.4 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7 0-12.6-1.8-25-5.4-37 16.8-22.2 26.1-49.4 26.1-77.7-.2-12.6-2-25.1-5.6-37.1zM184 852V568h81v284h-81zm636.4-353l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 16.5-7.2 32.2-19.6 43l-21.9 19 13.9 25.4a56.2 56.2 0 016.9 27.3c0 22.4-13.2 42.6-33.6 51.8H329V564.8l99.5-360.5a44.1 44.1 0 0142.2-32.3c7.6 0 15.1 2.2 21.1 6.7 9.9 7.4 15.2 18.6 14.6 30.5l-9.6 198.4h314.4C829 418.5 840 436.9 840 456c0 16.5-7.2 32.1-19.6 43z"
            />
          </svg>
          {{ props.data.param.hostypeString }}
        </div>
        <div class="card_content_right">
          <svg
            viewBox="64 64 896 896"
            focusable="false"
            data-icon="clock-circle"
            width="1em"
            height="1em"
            fill="currentColor"
            aria-hidden="true"
          >
            <path
              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
            />
            <path
              d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
            />
          </svg>
          {{ `每天${props.data.bookingRule.releaseTime}放号` }}
        </div>
      </div>
    </div>
    <div class="right_card_wrapper">
      <img :src="`data:image/jpeg;base64,${props.data?.logoData}`" alt="" />
    </div>
  </el-card>
</template>
<script lang="ts">
import { defineComponent } from "vue"

export default defineComponent({
  name: "hospital_card_page"
})
</script>
<script setup lang="ts">
import {ref, reactive, toRefs, computed, watch, defineProps, PropType} from "vue"
import { useRoute, useRouter } from "vue-router"
import {HospitalInfoInterface} from "@/api/modules/home/interface";
const router = useRouter()
const props = defineProps({
  data: {
    type: Object as PropType<HospitalInfoInterface>,
    default: () => ({} as HospitalInfoInterface),
    required: true
  }
})
const cardStyle = {
  display: "flex",
  "justify-content": "space-between",
  width: "100%",
  height: "100%"
}
// 跳转到医院信息页面
const goHospitalInfoHandler = () => {
  router.push({
    path: "/hospital/registration",
    query: {
      code:props.data.hoscode
    }
  })
}
</script>

<style lang="scss" scoped>
.card_wrapper {
  display: flex;
  justify-content: space-between;
  width: 470px;
  height: 100px;
  margin-bottom: 10px;
  cursor: pointer;
}

.left_card_wrapper {
  height: 100%;
  width: 270px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .card_title {
    font-size: 16px;
  }

  .card_content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #7f7f7f;
  }
}

.right_card_wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    border-radius: 40px;
    width: 80px;
    height: 80px;
  }
}
</style>
